<template>
	<view>
		<!-- 话题介绍组件 -->
		<topic-info :info="info"></topic-info>
		<!-- 分割线组件 -->
		<divider></divider>
		<!-- 精华帖子列表 -->
		<view class="p-2 flex align-center border-bottom"
		hover-class="bg-light"
		v-for="(item,index) in hotList"
		:key="index">
			<text class="iconfont icon-xihuan text-main"></text>
			<text class="font text-dark text-ellipsis">
				{{ item.title }}
			</text>
		</view>
		<!-- 分割线组件 -->
		<divider></divider>
		<!-- 话题选项卡列表 -->
		<view class="flex align-center py-2">
			<view 
			class="flex align-center justify-center flex-1"
			:class="tabIndex === index ? 'font-lg font-weight-bold text-main' : 'font-md'"
			v-for="(item,index) in tabBars"
			:key="index"
			@click="changeTab(index)"
			>
				{{ item.name }}
			</view>
		</view>
		<!-- 列表 -->
		<template v-if="listData.length > 0">
			<block v-for="(item,index) in listData" :key="index">
				<!--列表组件使用-->
				<common-list 
					:item="item" 
					:index="index" 
					
					>
				</common-list>
				<!-- 全局分割线 -->
				<divider></divider>
			</block>
		</template>
		<template v-else>
			<!-- 无数据 -->
			<nothing></nothing>
		</template>
	</view>
</template>

<script>
	const demo = [
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "/static/demo/datapic/11.jpg",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "support",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		}
	]
	//引入话题介绍组件
	import topicInfo from '@/components/topic-detail/topic-info.vue';
	//引入列表组件
	import commonList from '@/components/common/common-list.vue';
	export default {
		components: {
			topicInfo,
			commonList
		},
		data() {
			return {
				//详细信息
				info: {
					cover: "/static/demo/topicpic/1.jpeg",
					title: "话题名称",
					desc: "话题描述",
					today_count: 0,
					news_count: 10
				},
				//精华帖子列表
				hotList: [
					{ title: '【新人必读】uni-app实战第二季商城类项目开发' },
					{ title: '【新人必读】uni-app实战第二季商城类项目开发' }
				],
				//话题选项卡
				tabIndex: 0,
				tabBars: [
					{ name: '默认' },
					{ name: '最新' }
				],
				//默认数据
				defaultList: [],
				//最新数据
				latestList: []
			}
		},
		computed: {
			//计算显示默认还是最新数据
			listData() {
				if(this.tabIndex === 0) {
					return this.defaultList;
				}
				return this.latestList;
			}
		},
		onLoad(option) {
			//接受传递数据
			if(option.detail) {
				let res = JSON.parse(option.detail)
				console.log(res)
			}
			this.defaultList = demo;
		},
		methods: {
			//选项卡切花
			changeTab(index) {
				this.tabIndex = index;
			}
		}
	}
</script>

<style>

</style>
